<template>
  <lay-config-provider :themeVariable="appStore.themeVariable" :theme="appStore.theme">
    <lay-layout :class="[
      //appStore.tab ? 'has-tab' : '',
      appStore.collapse ? 'collapse' : '',
      appStore.greyMode ? 'grey-mode' : '',
    ]">
      <!-- 遮盖层 -->
      <div v-if="!appStore.collapse" class="layui-layer-shade hidden-sm-and-up" @click="collapse"></div>
      <!-- 核心菜单  -->
      <lay-side :width="sideWidth" :class="appStore.sideTheme == 'dark' ? 'dark' : 'light'">
        <lay-logo v-if="!appStore.collapse">{{ configStore.systemConfig.siteName }}</lay-logo>
        <lay-logo v-else>琪</lay-logo>
        <lay-scroll style="height: calc(100% - 62px)">
          <global-menu :collapse="appStore.collapse" v-if="appStore.modChange == 'system'"></global-menu>
          <CmsCateMenu :collapse="appStore.collapse" v-if="appStore.modChange == 'content'"></CmsCateMenu>
          <OasDocMenu :collapse="appStore.collapse" v-if="appStore.modChange == 'doc'"></OasDocMenu>
        </lay-scroll>
      </lay-side>
      <lay-layout style="width: 0px">
        <!-- header -->
        <lay-header style="display: flex">
          <lay-menu class="layui-layout-left" v-model:selected-key="appStore.modChange"
            @changeSelectedKey="changeModMenu(selectedKey)">
            <lay-menu-item @click="collapse" v-if="appStore.modChange == 'system'">
              <lay-icon v-if="appStore.collapse" type="layui-icon-spread-left"></lay-icon>
              <lay-icon v-else type="layui-icon-shrink-right"></lay-icon>
            </lay-menu-item>            
            <lay-menu-item @click="changeModMenu('/system/index')" id="system">
              <lay-tooltip content="系统管理" position="bottom">
                <lay-icon type="layui-icon-set"></lay-icon>系统管理
              </lay-tooltip>
            </lay-menu-item>
            <lay-menu-item @click="changeModMenu('/oas/doc/post/list')" id="doc">
              <lay-tooltip content="公文管理" position="bottom">
                <lay-icon type="layui-icon-form"></lay-icon>公文管理
              </lay-tooltip>
            </lay-menu-item>
            <lay-menu-item @click="changeModMenu('/cms/content/list')" id="content">
              <lay-tooltip content="网站管理" position="bottom">
                <lay-icon type="layui-icon-website"></lay-icon>网站管理
              </lay-tooltip>
            </lay-menu-item>
          </lay-menu>
          <lay-menu class="layui-layout-right">
            <lay-menu-item class="hidden-xs-only" @click="refresh">
              <lay-icon type="layui-icon-refresh-one"></lay-icon>
            </lay-menu-item>
            <lay-menu-item>
              <lay-tooltip content="访问网站" position="bottom">
                <a :href="configStore.systemConfig.siteUrl" target="_blank">
                  <lay-icon type="layui-icon-website"></lay-icon>
                </a>
              </lay-tooltip>
            </lay-menu-item>
            <lay-menu-item @click="changeModMenu('/notice/getlist')">
              <lay-tooltip content="消息" position="bottom">
                <lay-icon type="layui-icon-notice"></lay-icon>
                <lay-badge theme="orange" v-if="userInfoStore.statistics.noticeNoRead > 0">
                  {{ userInfoStore.statistics.noticeNoRead }}
                </lay-badge>
              </lay-tooltip>
            </lay-menu-item>

            <lay-menu-item>
              <lay-dropdown updateAtScroll placement="bottom">
                <lay-avatar :src="systemConfig.hostURL + userInfoStore.userInfo.avatar" radius class="avatar">
                </lay-avatar>
                <span> {{ stringSubs(userInfoStore.userInfo.nickName) }}</span>
                <template #content>
                  <lay-dropdown-menu>
                    <lay-dropdown-menu-item @click="changeModMenu('/auth/user/userchange')">
                      <template #default>
                        <lay-icon type="layui-icon-username"></lay-icon> 用户信息
                      </template>
                    </lay-dropdown-menu-item>
                    <lay-dropdown-menu-item @click="changeVisible">
                      <template #default>
                        <lay-icon type="layui-icon-slider"></lay-icon> 样式设置
                      </template>
                    </lay-dropdown-menu-item>
                    <lay-line></lay-line>
                    <lay-dropdown-menu-item @click="logOut">
                      <template #default>
                        <lay-icon type="layui-icon-logout"></lay-icon> 注销登录
                      </template>
                    </lay-dropdown-menu-item>
                  </lay-dropdown-menu>
                </template>
              </lay-dropdown>
            </lay-menu-item>
            <lay-menu-item>
              <lay-tooltip content="全屏" position="bottom">
                <lay-fullscreen v-slot="{ toggle, isFullscreen }">
                  <lay-icon @click="toggle()"
                    :type="isFullscreen ? 'layui-icon-screen-restore' : 'layui-icon-screen-full'"></lay-icon>
                </lay-fullscreen>
              </lay-tooltip>
            </lay-menu-item>
          </lay-menu>
        </lay-header>
        <!-- content -->
        <lay-body>
          <global-tab v-if="appStore.breadcrumb && appStore.modChange == 'system'"></global-tab>
          <GlobalBreadcrumb v-if="!appStore.breadcrumb && appStore.modChange == 'system'"></GlobalBreadcrumb>
          <global-content></global-content>
        </lay-body>
        <lay-footer></lay-footer>
      </lay-layout>
    </lay-layout>
    <global-setup v-model="visible"></global-setup>
  </lay-config-provider>
</template>

<script lang="ts" setup>
import { computed, ref, onMounted } from "vue";
import { useAppStore } from "../store/app";
import { useUserStore } from "../store/user";
import { useConfigStore } from "../store/config";
import GlobalSetup from "./Global/GlobalSetup.vue";
import GlobalContent from "./Global/GlobalContent.vue";
import GlobalBreadcrumb from "./Global/GlobalBreadcrumb.vue";
import GlobalTab from "./Global/GlobalTab.vue";
import GlobalMenu from "./Global/GlobalMenu.vue";
import { useRouter } from "vue-router";
import { Config, Statistics } from "../types/config";
import { UserInfo } from "../types/user";
import { delToken } from '../library/cookieUtil'
import CmsCateMenu from "./Scenario/CmsCateMenu.vue";
import OasDocMenu from "./Scenario/OasDocMenu.vue";
import { systemConfig } from "../library/config"
import Uitl from '../library/Util'
import { loginOut } from '../api/module/user/user'
import { layer } from "@layui/layer-vue";
import { useMenu } from "./composable/useMenu";

//const fullscreenRef = ref(null);
const appStore = useAppStore() as any;
const userInfoStore = useUserStore() as any;
const configStore = useConfigStore() as any;
const visible = ref(false);
const router = useRouter();
const sideWidth = computed(() => appStore.collapse ? "60px" : (appStore.subfield && appStore.subfieldPosition == 'side') ? "220px" : "220px")
const {
  selectedKey,
  changeModMenu
} = useMenu();

onMounted(() => {
  // mobile
  if (document.body.clientWidth < 768) {
    appStore.collapse = true;
    document.addEventListener('click', checkClick);
  }
})

const checkClick = (event: any) => {
  let dom = document.getElementById("lay-side");
  if (dom) {
    if (!dom.contains(event.target) && !event.target.classList.contains("layui-icon-spread-left")) {
      if (!appStore.collapse) {
        appStore.collapse = true;
      }
    }
  }
}

const changeVisible = function () {
  visible.value = !visible.value;
};

const usTool = Uitl;
const stringSubs = (str: string) => {
  return usTool.subStrs(str, 0, 4)
}
const collapse = function () {
  appStore.collapse = !appStore.collapse;
};

const refresh = function () {
  appStore.routerAlive = false;
  setTimeout(function () {
    appStore.routerAlive = true;
  }, 300);
};

const logOut = () => {
  loginOut().then((res) => {
    if (res.status == 1) {
      layer.msg(res.msg, { time: 1000, icon: 1 }, () => {
        delToken();
        userInfoStore.userInfo = [] as unknown as UserInfo
        configStore.systemConfig = <Config><unknown>[]
        userInfoStore.statistics = <Statistics><unknown>[]
        userInfoStore.userMenu = [] as unknown
        router.push("/login");
      })
    } else {
      layer.msg("退出失败", { icon: 2 })
    }
  })
}

</script>

<style>
@media screen and (max-width: 767px) {
  .layui-side {
    position: absolute;
    height: 100vh;
  }
}

.layui-header .layui-nav-item:hover {
  background: whitesmoke;
}

.layui-header .layui-nav-item * {
  color: #666 !important;
}

/*鼠标经过背景色，增加了improtant，否则设置无效*/
.layui-header .layui-nav-item .layui-icon:hover {
  background: whitesmoke !important;
}

/*面包屑颜色兼容*/
.layui-header .layui-nav-item .layui-breadcrumb a {
  color: #999 !important;
}

.layui-header .layui-nav-item .layui-breadcrumb a:nth-last-child(2) {
  color: #666 !important;
}

/*图标默认颜色修复，指定 .layui-icon 去掉improtant，否则无法设置图标其他颜色*/
.layui-header .layui-nav-item .layui-icon {
  color: #666;
}

/*取消默认a标签的padding:0 20px，否则扩大图标后容器变形*/
.layui-header .layui-nav-item>a {
  padding: 0 !important;
}

/*扩大图标尺寸与所在容器大小一致，默认大小导致鼠标必须点击图标才能触发事件效果*/
.layui-header .layui-nav-item .layui-icon {
  height: 50px;
  padding: 20px;
}

/*增加鼠标经过图标时改变图标颜色，颜色为当前系统主题色*/
.layui-header .layui-nav-item .layui-icon:hover {
  color: var(--global-primary-color) !important;
}

.grey-mode {
  filter: grayscale(1);
}
</style>